<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css"  media="all">
</head>
<body>




<form class="layui-form" action="">

    <div class="layui-form-item"  >
        <label class="layui-form-label">城市联动</label>
        <div class="layui-input-inline" >
            <select id="province" name="province" title="请选择所在省份" lay-filter="province">
                <option value="">选择省份</option>
                {volist name="province" id="vo"}
                <option value="{$vo.id}">{$vo.name}</option>
                {/volist}
            </select>
        </div>
        <div class="layui-input-inline" >
            <select  id="city" name="city" title="请选择所在城市" lay-filter="city">
                <option value="">选择城市</option>
            </select>
        </div>
        <div class="layui-input-inline" >
            <select id="district" name="district" title="请选择所在区县"  lay-filter="district">
                <option value="">选择区域</option>
            </select>
        </div>
    </div>


</form>



<script src="__STATIC__/layui/layui.js" ></script>

<script>
    layui.use(['form'], function(){
        var form = layui.form
            ,$ = layui.jquery;

        form.on('select(province)',function(data){
            var parent_id = data.value;
            if(!parent_id > 0){
                return;
            }
            var url = '/index/index/getRegion/level/2/parent_id/' + parent_id;
            $.ajax({
                type : "GET",
                url  : url,
                error: function(request) {
                    alert("服务器繁忙, 请联系管理员!");
                    return;
                },
                success: function(v) {
                    console.log(v);
                    v = '<option value="0">选择城市</option>'+ v;
                    $('#city').empty().html(v);
                    form.render('select');
                }
            });
        });

        /**
         * 获取地区
         * @param t  城市select对象
         */
        form.on('select(city)',function(data){
            var parent_id = data.value;
            if(!parent_id > 0){
                return;
            }
            var url = '/index/index/getRegion/level/3/parent_id/' + parent_id;
            $.ajax({
                type : "GET",
                url  : url,
                error: function(request) {
                    alert("服务器繁忙, 请联系管理员!");
                    return;
                },
                success: function(v) {
                    v = '<option>选择区域</option>'+ v;
                    $('#district').empty().html(v);
                    form.render('select');
                }
            });
        });




    });


</script>


</body>
</html>